<template>
  <div class="toast" v-show="isShow" :style="{background:color}">
    {{message}}
  </div>
</template>

<script>

export default {
  name: '',
  data () {
    return {
      message:'',
      isShow:false,
      color:'SlateGray'
    }
  },
  methods:{
   show(message,color='SlateGray'){
    this.isShow = true
    this.message = message
    this.color = color
    setTimeout(()=>{
     this.isShow = false
     this.message = ''
    },2000)
   }
}
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
 .toast{
  position: fixed;
  left: 50%;
  top: 50%;
  z-index: 999;
  transform: translate(-50%,-50%);
  background-color: SlateGray;
  color: #fff;
  border:1px solid #333;
  border-radius: 25px;
  padding: 5px 10px;
 }
</style>